<template>
  <div id="app">
    <!-- 头部 -->
    <div class="header">
      <headerBox></headerBox>
    </div>
    <!-- 中部 -->
    <div class="middle">
      <!-- 左侧 -->
      <div class="left">左边</div>
      <!-- 中间 -->
      <div class="content">
        <router-view></router-view>
      </div>
      <!-- 右侧 -->
      <div class="right">右边</div>
    </div>
    <!-- 底部 -->
    <div class="footer">底下</div>
  </div>
</template>
<script>
import headerBox from '@/views/out-box/headerBox.vue';

export default {
  components: { headerBox },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss">
.header {
  position: relative;
  width: 100vw;
  height: 9.8vh;
  border-bottom: 0.2vh solid rgb(255, 255, 255);
  background-color: rgb(121, 121, 121);
}

.middle {
  position: relative;
  display: flex;
  width: 100vw;
  height: 85vh;

  .left {
    position: absolute;
    left: 0;
    top: 0;
    width: 9.9vw;
    height: 100%;
    border-right: 0.1vw solid rgb(255, 255, 255);
    background-color: rgb(29, 29, 29);
    z-index: 19;
    color:#fff;
  }

  .left:hover {
    width: 15vw;
  }

  .content {
    position: absolute;
    left: 10vw;
    top: 0;

    width: 80vw;
    height: 100%;
    z-index: 19;
  }

  .right {
    position: absolute;
    right: 0;
    top: 0;
    width: 9.9vw;
    height: 100%;
    border-left: 0.1vw solid rgb(255, 255, 255);
    background-color: rgb(29, 29, 29);
    z-index: 19;
    color:#fff;
  }

  .right:hover {
    width: 15vw;
  }
}

.footer {
  position: relative;
  width: 100vw;
  height: 4.8vh;
  border-top: 0.2vh solid rgb(255, 255, 255);
  background-color: rgb(135, 135, 135);
  color:#fff;
  z-index: 19;
}
</style>
